const popup = {
    model: {
        prop: 'value',
        event: 'input'
    },
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            create: false
        }
    },
    watch: {
        value(newVal) {
            if (newVal) {
                this.create = true
            }
        }
    },
    template:
        `
    <div class="popup" v-if="value || create" :class="{show: value, hide: !value}">
    <div class="popup-right">
        <div class="popup-close" @click="$emit('input', !value)">
            <svg t="1716776862030" class="icon"  width="21" height="21" viewBox="0 0 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3476"><path fill="#717171" d="M18 21v-3h-3v-3h-3v-3H9V9h3v3h3v3h3v3h3v3ZM0 21v-3h3v3Zm3-3v-3h3v3Zm3-3v-3h3v3Zm6-6V6h3v3ZM6 9V6h3v3Zm9-3V3h3v3ZM3 6V3h3v3Zm15-3V0h3v3ZM0 3V0h3v3Z"/></svg>
        </div>
            <slot></slot>
        </div>
        <div class="overlay" @click="$emit('input', !value)"></div>
    </div>
    `
}